<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东营销风云榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .tableHead {
            font-size: 16px;
            color: white;
            margin-left: 6%;
        }

        .tableNumber {
            font-size: 20px;
            font-weight: normal;
            color: #FEC949;
        }

        #tableText {
            text-align: left;
            border-collapse: collapse;
            padding: 2px;
            width: 96%
        }

        tr {
            height: 41px;
        }

        #tableImg {
            text-align: right;
            border-collapse: collapse;
            padding: 2px;
            width: 96%;
            margin-top: 4%;
        }

        .imgPart {
            width: 100%;
        }

        table, tr, td {
            border: 0 solid gainsboro;
        }

        .tableYuan {
            font-size: small;
            color: white;
        }

        #imgDiv {
            padding-top: 15%;
            padding-bottom: 2%;
            background: url("../../img/portal/scyxPlatfrom.png");
            -webkit-background-size: 100% 100%;
        }

        /* 加载状态样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 9999;
        }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app">
    <!-- 加载状态 -->

    <!-- 主内容区域 -->
    <div>
        <div id="imgDiv">
            <div style="margin-top:5%;font-size: small;margin-left: 3%;color: white">截止时间：<span v-text="dataTime"></span></div>
            <div style="font-size: small;margin-left: 3%;color: white">刷新时间：<span v-text="sysUpdateTime"></span></div>
            <table align="center" id="tableText">
                <tr>
                    <td><span class="tableHead"> 当日预收: </span><span class="tableNumber" v-text="dayAdvance"></span><span class="tableYuan"> 万</span></td>
                    <td><span class="tableHead"> 当日承保: </span><span class="tableNumber" v-text="dayInSure"></span><span class="tableYuan"> 万</span></td>
                </tr>
                <tr>
                    <td><span class="tableHead"> 当月预收: </span><span class="tableNumber" v-text="monthAdvance"></span><span class="tableYuan"> 万</span></td>
                    <td><span class="tableHead"> 当月承保: </span><span class="tableNumber" v-text="monthInSure"></span><span class="tableYuan"> 万</span></td>
                </tr>
                <tr>
                    <td><span class="tableHead"> 全年承保: </span><span class="tableNumber" v-text="yearInSure"></span><span class="tableYuan"> 万</span></td>
                    <td><span class="tableHead"> 年达成率: </span><span class="tableNumber" v-text="achieveRate+'%'"></span></td>
                </tr>
                <tr>
                    <td><span class="tableHead"> 在册人力: </span><span class="tableNumber" v-text="registeredHuman"></span><span class="tableYuan"> 人</span></td>
                    <td><span class="tableHead"> 当月新人: </span><span class="tableNumber" v-text="currentMonthHuman"></span><span class="tableYuan"> 人</span></td>
                </tr>
                <tr>
                    <td><span class="tableHead"> 实动人力: </span><span class="tableNumber" v-text="actHuman"></span><span class="tableYuan"> 人</span></td>
                    <td><span class="tableHead"> 万元人力: </span><span class="tableNumber" v-text="goodHuman"></span><span class="tableYuan"> 人</span></td>
                </tr>
            </table>
        </div>
        <table align="center" id="tableImg">
            <tr>
                <td style="text-align: center;"><a href="../part/performance/performance.html"><img style="vertical-align:middle;" src="../../img/portal/performance.png" class="imgPart"></a></td>
                <td style="text-align: center;"><a href="../part/newAdd/newAdd.html"><img style="vertical-align:middle;" src="../../img/portal/newAdd.png" class="imgPart"></a></td>
            </tr>
            <tr>
                <td style="text-align: center;"><a href="../part/realAct/realAct.html"><img style="vertical-align:middle;" src="../../img/portal/realAct.png" class="imgPart"></a></td>
                <td style="text-align: center;"><a href="../part/promotion/promotion.html"><img style="vertical-align:middle;" src="../../img/portal/promotion.png" class="imgPart"></a></td>
            </tr>
            <tr>
                <td style="text-align: center;"><a href="../part/excellent/excellent.html"><img style="vertical-align:middle;" src="../../img/portal/excellent.png" class="imgPart"></a></td>
                <td style="text-align: center;"><a href="../part/product/product.html"><img style="vertical-align:middle;" src="../../img/portal/product.png" class="imgPart"></a></td>
            </tr>
            <tr>
                <td style="text-align: center;"><a href="../part/goOn/goOn.html"><img style="vertical-align:middle;" src="../../img/portal/continue.png" class="imgPart"></a></td>
                <td style="text-align: center;"><a href="../part/attend/attend.html"><img style="vertical-align:middle;" src="../../img/portal/attend.png" class="imgPart"></a></td>
            </tr>
            <tr>
                <td style="text-align: center;"><a href="../part/deptLevels/deptLevels.html"><img style="vertical-align:middle;" src="../../img/portal/deptLevels.png" class="imgPart"></a></td>
                <td style="text-align: center;"><a href="../part/sz/sz.html"><img style="vertical-align:middle;" src="../../img/portal/sz.png" class="imgPart"></a></td>
            </tr>
        </table>
    </div>
</div>

<script src="../../js/axios.js"></script>
<script src="../../js/share.js"></script>
<script src="../../js/head.js"></script>
<script src="../../js/vue.js"></script>
<script>
    window.onload = async function () {
        new Vue({
            el: '#app',
            data() {
                return {
                    loading: true,
                    dayAdvance: '',
                    dayInSure: '',
                    monthAdvance: '',
                    monthInSure: '',
                    yearInSure: '',
                    achieveRate: '',
                    registeredHuman: '',
                    currentMonthHuman: '',
                    actHuman: '',
                    goodHuman: '',
                    dataTime: '',
                    sysUpdateTime: '',
                    pojo: {},
                    token: null
                }
            },

            async created() {
/*                const urlParams = new URLSearchParams(window.location.search);
                const token = urlParams.get('token');
                if (token) {
                    // 存储token到localStorage
                    localStorage.setItem('authToken', token);
                    console.log('Token已接收并存储:', token);
                }
                this.token = localStorage.getItem('authToken');
                // 3. 获取业务数据*/
                console.log('🔄 调用getSalesData方法');
                console.log('当前token:', localStorage.getItem('authToken'));
                await this.getSalesData();
            },
            methods: {
                async getSalesData() {
                    try {
                        const response = await axios.get(`/navigation/getSalesData`);
                        this.pojo = response.data;
                        this.dayAdvance = Math.round(this.pojo.dayAdvance / 10000);
                        this.dayInSure = Math.round(this.pojo.dayInSure / 10000);
                        this.monthAdvance = Math.round(this.pojo.monthAdvance / 10000);
                        this.monthInSure = Math.round(this.pojo.monthInSure / 10000);
                        this.yearInSure = Math.round(this.pojo.yearInSure / 10000);
                        this.achieveRate = Math.round(this.yearInSure /(this.pojo.yearTarget / 10000000)) / 10;
                        this.registeredHuman = this.pojo.registeredHuman;
                        this.currentMonthHuman = this.pojo.currentMonthHuman;
                        this.actHuman = this.pojo.actHuman;
                        this.goodHuman = this.pojo.goodHuman;
                        this.dataTime = this.pojo.dataTime;
                        this.sysUpdateTime = this.pojo.sysUpdateTime;
                    } catch (error) {
                        console.error('获取数据失败:', error);
                        if (error.response && error.response.status === 401) {
                            localStorage.removeItem('authToken');
                            this.token = null;
                            await this.created();
                        }
                    } finally {
                        this.loading = false;
                    }
                }
            }
        });
    }
</script>
</body>
</html>